<template>
  <div class="search-page">
    <!-- 顶部搜索区域 -->
    <div class="search-header">
      <div class="back-button" @click="$router.back()">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="search-input-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索商品"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="search-button" @click="handleSearch">搜索</div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <div class="filter-tabs">
        <div
          v-for="(tab, index) in filterTabs"
          :key="index"
          :class="['filter-tab', { active: activeFilterTab === index }]"
          @click="setActiveFilterTab(index)"
        >
          {{ tab.name }}
          <el-icon v-if="tab.sortable"><CaretBottom /></el-icon>
        </div>
      </div>
      
      <!-- 价格筛选 -->
      <div class="price-filter" v-if="showPriceFilter">
        <div class="price-range">
          <el-input v-model="minPrice" placeholder="最低价" type="number">
            <template #prefix>¥</template>
          </el-input>
          <span class="separator">-</span>
          <el-input v-model="maxPrice" placeholder="最高价" type="number">
            <template #prefix>¥</template>
          </el-input>
        </div>
        <el-button size="small" @click="applyPriceFilter">确定</el-button>
      </div>
      
      <!-- 更多筛选选项 -->
      <div class="more-filters" v-if="showMoreFilters">
  <div class="filter-section">
    <h4>发货地</h4>
    <div class="filter-options">
      <div
        v-for="(option, idx) in deliveryLocationOptions"
        :key="idx"
        :class="['filter-option', { selected: tempDeliveryLocation.includes(option.value) }]"
        @click="toggleDeliveryLocation(option.value)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
        
  <div class="filter-section">
    <h4>发货方式</h4>
    <div class="filter-options">
      <div
        v-for="(option, idx) in deliveryMethodOptions"
        :key="idx"
        :class="['filter-option', { selected: tempDeliveryMethod.includes(option.value) }]"
        @click="toggleDeliveryMethod(option.value)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
        
        <div class="filter-actions">
          <el-button @click="resetFilters">重置</el-button>
          <el-button type="primary" @click="applyFilters">确定</el-button>
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="product-list-container">
      <div v-if="isLoading" class="loading-container">
        <el-skeleton :rows="10" animated />
      </div>
      
  <div v-else-if="filteredProducts.length === 0" class="empty-result">
  <el-empty description="没有找到相关商品" :image-size="200">
    <template #description>
      <p>没有找到符合筛选条件的商品</p>
      <p class="empty-tips">您可以尝试：</p>
      <ul class="empty-suggestions">
        <li>调整筛选条件</li>
        <li @click="resetFilters" style="cursor: pointer; color: #45a049;">重置所有筛选条件</li>
      </ul>
    </template>
  </el-empty>
</div>
      
      <div v-else class="product-grid">
        <div
          v-for="product in filteredProducts"
          :key="product.product_code"
          class="product-card"
          @click="viewProduct(product)"
        >
          <div class="product-image-container">
            <img 
            :src="product.image+'?imageView2/2/w/300/h/300/q/75'" 
            :alt="product.title || product.name" 
            class="product-image"
            loading="lazy"
            style="width: 100%; height: 100%; object-fit: cover; transform: translateZ(0);"
            >
            <span v-if="product.status === 2" class="product-status sold">已售出</span>
          </div>
          <div class="product-info">
            <div class="product-title">{{ product.title || product.name }}</div>
            <div class="product-meta">
              <div class="product-price">¥{{ product.price }}</div>
              <div class="product-location" v-if="product.location">{{ product.location }}</div>
            </div>
            <div class="seller-info" v-if="product.seller">
              <img :src="product.seller.avatar || DEFAULT_AVATAR"
              class="seller-avatar"
              @error="handleAvatarError">
              <span class="seller-name">{{ product.seller.username }}</span>
            </div>
          </div>
          <div class="product-actions">
            <button
              class="favorite-btn" 
              :class="{ active: product.isFavorite }"
              @click.stop="toggleFavorite(product)"
            >
              <el-icon><Star /></el-icon>
            </button>
          </div>
        </div>
      </div>
      
      <div v-if="hasMoreProducts && !isLoading" class="load-more">
        <el-button @click="loadMoreProducts">加载更多</el-button>
      </div>
      
      <div v-if="isLoadingMore" class="loading-more">
        <el-icon class="loading-icon"><Loading /></el-icon> 加载中...
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Search, CaretBottom, Star, Loading } from '@element-plus/icons-vue'
import axios from 'axios'
import apiClient from '../../utils/request'
import {DEFAULT_AVATAR} from '../../utils/userUtils'
const handleAvatarError = (e) => {
  e.target.src = DEFAULT_AVATAR
}
const router = useRouter()
const route = useRoute()

// 搜索相关
const searchKeyword = ref(route.query.q || '')
const isLoading = ref(false)
const isLoadingMore = ref(false)
const products = ref([])
const page = ref(1)
const pageSize = ref(20)
const hasMoreProducts = ref(true)

// 筛选相关
const activeFilterTab = ref(0)
const showPriceFilter = ref(false)
const showMoreFilters = ref(false)
const minPrice = ref('')
const maxPrice = ref('')
const selectedProductStatus = ref([])
const selectedSort = ref('default')
const selectedDeliveryMethod = ref([])
const selectedDeliveryLocation = ref([])
const tempDeliveryLocation = ref([])
const tempDeliveryMethod = ref([])
//筛选选项
const filterTabs = [
  { name: '综合', sortable: true, value: 'default' },
  { name: '新上', sortable: false, value: 'newest' },
  { name: '价格', sortable: true, value: 'price' },
  { name: '信誉', sortable: true, value: 'seller__credit_score' },
  { name: '筛选', sortable: false, value: 'filter' }
]

// 添加发货地选项
const deliveryLocationOptions = [
  { label: '浦东校区', value: '浦东' },
  { label: '嘉定校区', value: '嘉定' },
  { label: '四平校区', value: '四平' }
]

const deliveryMethodOptions = [
  { label: '包邮', value: 0 },
  { label: '按距离计费', value: 1 },
  { label: '一口价', value: 2 }, 
  { label: '无需邮寄', value: 3 }
]
const productStatusOptions = [
  { label: '在售', value: 1 },
  { label: '已售出', value: 2 }
]

// 设置筛选标签
const setActiveFilterTab = (index) => {
  if (activeFilterTab.value === index) {
    if (filterTabs[index].sortable) {
      toggleSortDirection(filterTabs[index].value)
    }
  } else {
    if (activeFilterTab.value === 2) { // 2是价格筛选的索引
      minPrice.value = ''
      maxPrice.value = ''
    }
    activeFilterTab.value = index
    if (filterTabs[index].value === 'price') {
      showPriceFilter.value = true
      showMoreFilters.value = false
    } else if (filterTabs[index].value === 'filter') {
      showMoreFilters.value = true
      showPriceFilter.value = false
      tempDeliveryMethod.value = [...selectedDeliveryMethod.value]
      tempDeliveryLocation.value = [...selectedDeliveryLocation.value]
    } else {
      showPriceFilter.value = false
      showMoreFilters.value = false
      
      // 应用排序
      selectedSort.value = filterTabs[index].value
      handleSearch()
    }
  }
}

// 在 script setup 中的 computed 导入后添加
const filteredProducts = computed(() => {
  return products.value.filter(product => {
    if (minPrice.value && maxPrice.value) {
      const price = Number(product.price)
      if (price < Number(minPrice.value) || price > Number(maxPrice.value)) {
        return false
      }
    } else if (minPrice.value) {
      if (Number(product.price) < Number(minPrice.value)) {
        return false
      }
    } else if (maxPrice.value) {
      if (Number(product.price) > Number(maxPrice.value)) {
        return false
      }
    }
    // 发货地筛选
    if (selectedDeliveryLocation.value.length > 0) {
      if (!selectedDeliveryLocation.value.includes(product.location)) {
        return false;
      }
    }
    
    // 发货方式筛选
    if (selectedDeliveryMethod.value.length > 0 && product.delivery_method) {
      if (!selectedDeliveryMethod.value.includes(product.delivery_method)) {
        return false;
      }
    }
    
    return true;
  });
});
// 切换排序方向
const toggleSortDirection = (sortValue) => {
  if (sortValue === 'price') {
    // 价格排序切换
    if (selectedSort.value === 'price') {
      selectedSort.value = 'price_desc'
    } else {
      selectedSort.value = 'price'
    }
  } else if (sortValue === 'seller__credit_score') {
    // 信誉排序切换
   if (selectedSort.value === 'seller__credit_score') {
      selectedSort.value = '-seller__credit_score'
    } else {
      selectedSort.value = 'seller__credit_score'
    }
  } else {
    // 其他排序
    selectedSort.value = sortValue
  }
  handleSearch()
}
// 切换发货方式筛选
const toggleDeliveryMethod = (value) => {
  const index = tempDeliveryMethod.value.indexOf(value)
  if (index > -1) {
    tempDeliveryMethod.value.splice(index, 1)
  } else {
    tempDeliveryMethod.value.push(value)
  }
}
// 切换发货地筛选
const toggleDeliveryLocation = (value) => {
  const index = tempDeliveryLocation.value.indexOf(value)
  if (index > -1) {
    tempDeliveryLocation.value.splice(index, 1)
  } else {
    tempDeliveryLocation.value.push(value)
  }
}
// 切换商品状态筛选
const toggleProductStatus = (value) => {
  const index = selectedProductStatus.value.indexOf(value)
  if (index > -1) {
    selectedProductStatus.value.splice(index, 1)
  } else {
    selectedProductStatus.value.push(value)
  }
}

// 应用价格筛选
const applyPriceFilter = () => {
  // 验证价格输入的合法性
  if (minPrice.value && maxPrice.value) {
    if (Number(minPrice.value) > Number(maxPrice.value)) {
      ElMessage.warning('最低价不能大于最高价')
      return
    }
  }
  showPriceFilter.value = false
  handleSearch()
}
// 应用所有筛选
const applyFilters = () => {
  showMoreFilters.value = false
  // 将临时状态应用到实际筛选条件
  selectedDeliveryMethod.value = [...tempDeliveryMethod.value]
  selectedDeliveryLocation.value = [...tempDeliveryLocation.value]
  handleSearch()
}
// 重置筛选
const resetFilters = () => {
  minPrice.value = ''
  maxPrice.value = ''
  tempDeliveryMethod.value = []
  tempDeliveryLocation.value = []
  selectedDeliveryMethod.value = []
  selectedDeliveryLocation.value = []
  selectedSort.value = 'default' // 重置排序为默认
  activeFilterTab.value = 0 // 重置活动标签为"综合"
  handleSearch()
}

// 收藏/取消收藏
const toggleFavorite = async (product) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
  if (!isLoggedIn) {
    router.push('/login')
    return
  }
  
  try {
    product.isFavorite = !product.isFavorite
    
    if (product.isFavorite) {
      await apiClient.post(`/api/products/buyer/${product.product_code}/favorites/`)
      ElMessage.success('收藏成功')
    } else {
      await apiClient.delete(`/api/products/buyer/${product.product_code}/favorites/`)
      ElMessage.success('已取消收藏')
    }
  } catch (error) {
    console.error('操作失败:', error)
    product.isFavorite = !product.isFavorite // 恢复状态
    ElMessage.error('操作失败，请稍后再试')
  }
}

// 查看商品详情
const viewProduct = (product) => {
  if (product?.product_code) {
    router.push(`/product/${product.product_code}`)
  } else {
    ElMessage.error('商品信息异常')
  }
}

// 处理搜索
const handleSearch = async () => {  
  isLoading.value = true
  page.value = 1
  products.value = []
  
  try {
    const params = new URLSearchParams()
    
    if (searchKeyword.value.trim()) {
      params.append('q', searchKeyword.value.trim())
    }
    
    if (minPrice.value) {
      params.append('min_price', minPrice.value)
    }
    
    if (maxPrice.value) {
      params.append('max_price', maxPrice.value)
    }
    
    if (selectedProductStatus.value.length > 0) {
      selectedProductStatus.value.forEach(status => {
        params.append('status', status)
      })
    }
    
    if (selectedSort.value) {
      params.append('sort', selectedSort.value.includes('credit') 
        ? selectedSort.value.replace('credit', 'seller__credit_score') 
        : selectedSort.value)
    }
    
    params.append('page', page.value)
    params.append('page_size', pageSize.value)
    
    // 更新URL，但不触发路由变化
    const newQuery = { ...route.query, q: searchKeyword.value }
    router.replace({ query: newQuery })
    
    console.log('当前排序参数:', {
    sort: selectedSort.value,
    page: page.value,
  })
    const searchUrl = `/api/products/buyer/search?${params.toString()}`
    const response = await axios.get(searchUrl)

    if (Array.isArray(response.data)) {
      let mappedProducts = response.data.map(item => ({
        id: item.id,
        product_code: item.product_code,
        title: item.name,
        price: Number(item.price),
        status: item.status,
        location: item.delivery_location,
        seller: {
          id: item.seller.id,
          username: item.seller.username,
          avatar: item.seller.avatar,
          // 使用后端返回的信用分字段
          credit: item.seller.credit_score || 0
        },
        delivery_method: Number(item.delivery_method), // 确保转换为数字
        createdAt: new Date(item.created_at),
        image: item.images?.length > 0 
          ? (item.images[0].url || item.images[0].thumbnail_url)
          : 'https://picsum.photos/300/200?random=' + Math.random(),
        isFavorite: false
      }))
      // 将筛选逻辑移到这里
    if (selectedDeliveryMethod.value.length > 0) {
      mappedProducts = mappedProducts.filter(product => 
        selectedDeliveryMethod.value.includes(product.delivery_method)
      )
    }

    if (selectedDeliveryLocation.value.length > 0) {
      mappedProducts = mappedProducts.filter(product =>
        selectedDeliveryLocation.value.includes(product.location)
      )
    }

      // 统一排序处理
      if (selectedSort.value === 'seller__credit_score') {
        mappedProducts.sort((a, b) => b.seller.credit - a.seller.credit)
      } else if (selectedSort.value === '-seller__credit_score') {
        mappedProducts.sort((a, b) => a.seller.credit - b.seller.credit)
      } else if (selectedSort.value === 'price') {
        mappedProducts.sort((a, b) => a.price - b.price)
      } else if (selectedSort.value === 'price_desc') {
        mappedProducts.sort((a, b) => b.price - a.price)
      } else if (selectedSort.value === 'newest') {
        mappedProducts.sort((a, b) => b.createdAt - a.createdAt)
      }

      products.value = mappedProducts
      hasMoreProducts.value = response.data.length >= pageSize.value
    } else {
      products.value = []
      hasMoreProducts.value = false
    }
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索失败，请稍后重试')
    products.value = []
    hasMoreProducts.value = false
  } finally {
    isLoading.value = false
  }
}

// 加载更多商品
const loadMoreProducts = async () => {
  if (isLoadingMore.value || !hasMoreProducts.value) return
  
  isLoadingMore.value = true
  page.value++
  
  try {
    // 构建查询参数
    const params = new URLSearchParams()
    
    if (searchKeyword.value.trim()) {
      params.append('q', searchKeyword.value.trim())
    }
    
    if (minPrice.value) {
      params.append('min_price', minPrice.value)
    }
    
    if (maxPrice.value) {
      params.append('max_price', maxPrice.value)
    }
    
    if (selectedDeliveryMethod.value.length > 0) {
      selectedDeliveryMethod.value.forEach(method => {
        params.append('delivery_method', method)
      })
    }
    
    if (selectedDeliveryLocation.value.length > 0) {
      selectedDeliveryLocation.value.forEach(location => {
        params.append('delivery_location', location)
      })
    }
    
    params.append('page', page.value)
    params.append('page_size', pageSize.value)
    
    // 发送请求
    const searchUrl = `/api/products/buyer/search?${params.toString()}`
    const response = await axios.get(searchUrl)
    
    if (Array.isArray(response.data)) {
      // 处理新加载的商品数据
      const newProducts = response.data.map(item => ({
        id: item.id,
        product_code: item.product_code,
        title: item.name,
        price: item.price,
        status: item.status,
        location: item.delivery_location,
        seller: {
          id: item.seller.id,
          username: item.seller.username,
          avatar: item.seller.avatar || '../assets/default-avatar.png',
          credit: item.seller.credit_score || 0
        },
        delivery_method: Number(item.delivery_method),
        createdAt: new Date(item.created_at),
        image: item.images && item.images.length > 0 
          ? (item.images[0].url || item.images[0].thumbnail_url)
          : 'https://picsum.photos/300/200?random=' + Math.random(),
        isFavorite: false
      }))

      // 去重处理：使用 Set 存储已有的 product_code
      const existingProductCodes = new Set(products.value.map(p => p.product_code))
      const uniqueNewProducts = newProducts.filter(product => !existingProductCodes.has(product.product_code))
      
      // 根据排序方式处理数据
      let updatedProducts = [...products.value, ...uniqueNewProducts]
      
      // 应用排序
      if (selectedSort.value === 'price') {
        updatedProducts.sort((a, b) => a.price - b.price)
      } else if (selectedSort.value === 'price_desc') {
        updatedProducts.sort((a, b) => b.price - a.price)
      } else if (selectedSort.value === 'seller__credit_score') {
        updatedProducts.sort((a, b) => b.seller.credit - a.seller.credit)
      } else if (selectedSort.value === '-seller__credit_score') {
        updatedProducts.sort((a, b) => a.seller.credit - b.seller.credit)
      }
      
      // 更新商品列表
      products.value = updatedProducts
      
      // 更新是否还有更多数据的标志
      hasMoreProducts.value = uniqueNewProducts.length > 0 && response.data.length >= pageSize.value
      
      // 如果没有新的唯一商品，且后端返回的数据量达到页面大小，继续加载下一页
      if (uniqueNewProducts.length === 0 && response.data.length >= pageSize.value) {
        await loadMoreProducts()
      }
    } else {
      hasMoreProducts.value = false
    }
  } catch (error) {
    console.error('加载更多失败:', error)
    ElMessage.error('加载更多失败，请稍后重试')
  } finally {
    isLoadingMore.value = false
  }
}

// 监听路由变化
watch(() => route.query.q, (newValue) => {
  if (newValue !== searchKeyword.value) {
    searchKeyword.value = newValue || ''
    handleSearch()
  }
})

onMounted(() => {
  if (searchKeyword.value) {
    handleSearch()
  }
})
</script>

<style scoped>
.search-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 50px;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-button {
  margin-right: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #606266;
}

.search-input-container {
  flex: 1;
}

.search-button {
  margin-left: 10px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  background-color: #45a049;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.filter-container {
  background-color: #fff;
  margin-bottom: 10px;
  position: relative;
}

.filter-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-tab.active {
  color: #45a049;
  font-weight: 500;
}

.price-filter {
  padding: 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.price-range {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 15px;
}

.separator {
  margin: 0 10px;
  color: #909399;
}

.more-filters {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-section h4 {
  font-size: 14px;
  margin: 0 0 10px;
  color: #303133;
  font-weight: 500;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-option {
  padding: 6px 12px;
  background-color: #f5f7fa;
  border-radius: 15px;
  font-size: 12px;
  color: #606266;
  cursor: pointer;
}

.filter-option.selected {
  background-color: #e6f7ff;
  color: #45a049;
  border: 1px solid #45a049;
}

.filter-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.product-list-container {
  padding: 10px;
}

.loading-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.empty-result {
  padding: 40px 20px;
  text-align: center;
}

.empty-tips {
  margin: 15px 0 5px;
  color: #909399;
}

.empty-suggestions {
  text-align: left;
  display: inline-block;
  color: #909399;
  font-size: 13px;
  padding-left: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* 强制保持1:1比例 */
  overflow: hidden;
  background: #f5f5f5; /* 加载前的占位背景 */
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-status {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px 8px;
  font-size: 12px;
  border-bottom-left-radius: 8px;
}

.product-status.sold {
  background-color: rgba(245, 108, 108, 0.8);
}

.product-info {
  padding: 10px;
}

.product-title {
  font-size: 14px;
  margin-bottom: 5px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 40px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.product-price {
  color: #ff6b6b;
  font-weight: bold;
  font-size: 16px;
}

.product-location {
  font-size: 12px;
  color: #909399;
}

.seller-info {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.seller-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.seller-name {
  font-size: 12px;
  color: #909399;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

.product-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.favorite-btn {
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dcdfe6;
  cursor: pointer;
}

.favorite-btn.active {
  color: #ff6b6b;
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

.loading-more {
  text-align: center;
  color: #909399;
  margin-top: 20px;
  font-size: 14px;
}

.loading-icon {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .filter-options {
    gap: 8px;
  }
  
  .filter-option {
    padding: 4px 10px;
    font-size: 12px;
  }
}
</style> 